<!-- <script type="text/javascript" src="/js/mac/grid_fixCol.min.js"></script> -->
<script type="text/javascript" src="/src/js/mac/grid_fixCol.js"></script>
<style type="text/css">
/* For FixCol Plugin, You can merge this to default.css */
.grid>.fixed { float: left; display: none; }
.grid>.fixed>.body { overflow: hidden; border-left: 1px solid #93C3CD; }
.grid>.fixed>.body>.tt>.tr { white-space: nowrap; display: inline-block; }
.grid>.fixed>.head { border-right: none; }
.grid .tr.hover .td { background-color: #FBCC88; }
/* For mutli-headers */
.fixColGrid .head { height: 50px; }
.fixColGrid .ybar { margin-top: 48px; }
.fixColGrid .th { height: 48px; }
.fixColGrid .th .sizer { height: 48px; }
.fixColGrid .th[group] { height: 24px; border-left: 0px; }
.fixColGrid .foot .td { background-color: #CCC; height: 32px; }
</style>
<script type="text/javascript">
$(function(){
	var pg = $('body');
	var vw = pg.find('.view');
	var hd1 = $('<div class="tth"></div>');
	var hdt = $('<div style="height: 25px"><div class="title">'
		+ '&nbsp;Account</div></div>').appendTo(hd1);
	var hdb = $('<div style="height: 25px"></div>').appendTo(hd1);
	vw.mac('grid', {
		sortLocally: true,
		headerHeight: 48,
		cols : [{
			field: 'subject', width: 120, title : 'Subject',
			sizeable: true, moveable: false,
		},{
			field: 'account', title : 'account', header: hd1,
			width: 242, isGroup: true, sizeable: true
		},{
			field: 'debit', title : 'Debit', width: 120,
			sort: true, parent: hdb, group: 'account',
			render: function(r, tr){
				if(r.debit)
					return '<div class="money">$'+r.debit + '</div>';
				return '';
			}
		},{
			field: 'credit', title : 'Credit', width: 120,
			sort: true, parent: hdb, group: 'account',
			render: function(r, tr){
				if(r.credit)
					return '<div class="money">$'+r.credit + '</div>';
				return '';
			}
		},{
			field: 'summary', title : 'Summary', width: 400
		}],
		loader: {
			url: '/mac/js/grid/data.php',
			params: { pageNo: 1, pageSize: 50 },
			autoLoad: true
		},
		afterLoad: function(dd, po, me){
			//alert('This is orginal afterLoad function.');
		}
	});
	vw.mac('grid_fixCol');
	pg.seek('fix').click(function(){
		var fns = [ 'subject', 'account' ];
		if($(this).prop('checked')){
			vw.lockCols(fns);
		}else{
			vw.unlockCols();
		}
	});
});
</script>
<p><input type="checkbox" name="fix" />Fix Subject Column</p>
<div class="viewPort demoPanel" style="height: 360px;">
	<div class="view grid fixColGrid"></div>
</div>